<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">消防设备统计</div>
      </div>
    </div>
    <div class="flex-container-fi">
      <div class="fi-box">
        <div class="fi-box1">
          <div class="fi-item1"></div>
          <div class="fi-item2">
            <div class="fi-item2-1">20</div>
            <div class="fi-item2-2">烟感设备总数</div>
          </div>
        </div>
        <div class="fi-box2">
          <div class="fi-item1-2"></div>
          <div class="fi-item2">
            <div class="fi-item2-1">20%</div>
            <div class="fi-item2-2">烟感设备在线率</div>
          </div>
        </div>
      </div>
      <div class="fi-box">
        <div class="fi-box1">
          <div class="fi-item1-3"></div>
          <div class="fi-item2">
            <div class="fi-item2-1">20</div>
            <div class="fi-item2-2">烟感设备离线数</div>
          </div>
        </div>
        <div class="fi-box1">
          <div class="fi-item1-4"></div>
          <div class="fi-item2">
            <div class="fi-item2-1">20</div>
            <div class="fi-item2-2">烟感设备在线数</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">当前告警数</div>
      </div>
    </div>
    <div class="flex-container-fi2">
      <div class="fi-box-2">
        <div class="fi-box2item-1"></div>
        <div class="fi-box2item-2">132</div>
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">一周告警统计</div>
      </div>
    </div>
    <div class="flex-container-fi">
      <div class="cht14">
        <v-chart id="chart14" class="chart14" :option="option14" />
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">月度告警统计</div>
      </div>
    </div>
    <div class="flex-container-fi">
      <div class="cht15">
        <v-chart id="chart15" class="chart15" :option="option15" />
      </div>
    </div>
  </div>
</template>

<script>
// var chartDom = document.getElementById("main");postall
// var myChart = echarts.init(chartDom);
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";

export default {
  data() {
    return { option14: {}, option15: {} };
  },
  setup() {},
  mounted() {
    this.option14 = {
      tooltip: {
        trigger: "axis",
        textStyle: {
          fontSize: 10, // 设置图例文字大小
        },
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      grid: {
        top: "18%",
        left: "10%",
        bottom: "10%",
        tooltip: {
          axisPointer: {
            label: {
              fontSize: 10,
            },
          },
        },
      },

      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisPointer: {
          type: "shadow",
        },
        nameTextStyle: {
          fontSize: 10,
        },
        axisLabel: {
          interval: 0,
          fontSize: 10,
          color: "#ffffff", // 设置图例文字大小
        },
        axisTick: {
          show: false,
        },
      },

      yAxis: {
        type: "value",
        name: "件",
        min: 0,
        max: 200,
        // interval: 1,
        nameTextStyle: {
          fontSize: 10,
          color: "#ffffff", // 设置图例文字大
          align: "right",
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
          },
        },
        axisLabel: {
          hideOverlap: true,
          interval: 0,
          fontSize: 10,
          formatter: "{value} ",
          color: "#ffffff", // 设置图例文字大小
        },
        splitLine: {
          show: false, // 不显示网格线
        },
      },
      series: [
        {
          name: "事件总数",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            borderColor: "#3fb1e3",
            color: function (params) {
              // 设置白色渐变和红色渐变的间隔
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#3fb1e340" },
                { offset: 0.1, color: "#3fb1e3" },
                { offset: 0.5, color: "#3fb1e365" },
                { offset: 1, color: "#3fb1e300" },
              ]);
            },
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + " 件";
            },
          },
          label: {
            show: true,
            position: "top",
            itemWidth: 8,
            itemHeight: 5,
            textStyle: {
              fontSize: 10,
              color: "#ffffff", // 设置图例文字大小
            },
          },
          data: [120, 200, 150, 80, 70, 110, 130],
        },
      ],
    };
    this.option15 = {
      tooltip: {
        trigger: "axis",
        textStyle: {
          fontSize: 10, // 设置图例文字大小
        },
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      grid: {
        top: "18%",
        left: "10%",
        bottom: "10%",
        tooltip: {
          axisPointer: {
            label: {
              fontSize: 10,
            },
          },
        },
      },

      xAxis: {
        type: "category",
        data: [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
        ],
        axisPointer: {
          type: "shadow",
        },
        nameTextStyle: {
          fontSize: 10,
        },
        axisLabel: {
          interval: 0,
          fontSize: 10,
          color: "#ffffff", // 设置图例文字大小
        },
        axisTick: {
          show: false,
        },
      },

      yAxis: {
        type: "value",
        name: "件",
        min: 0,
        max: 200,
        // interval: 1,
        nameTextStyle: {
          fontSize: 10,
          color: "#ffffff", // 设置图例文字大
          align: "right",
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
          },
        },
        axisLabel: {
          hideOverlap: true,
          interval: 0,
          fontSize: 10,
          formatter: "{value} ",
          color: "#ffffff", // 设置图例文字大小
        },
        splitLine: {
          show: false, // 不显示网格线
        },
      },
      series: [
        {
          name: "事件总数",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            borderColor: "#3fb1e3",
            color: function (params) {
              // 设置白色渐变和红色渐变的间隔
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#3fb1e340" },
                { offset: 0.1, color: "#3fb1e3" },
                { offset: 0.5, color: "#3fb1e365" },
                { offset: 1, color: "#3fb1e300" },
              ]);
            },
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + " 件";
            },
          },
          label: {
            show: true,
            position: "top",
            itemWidth: 8,
            itemHeight: 5,
            textStyle: {
              fontSize: 10,
              color: "#ffffff", // 设置图例文字大小
            },
          },
          data: [120, 200, 150, 80, 70, 110, 130, 70, 110, 130],
        },
      ],
    };
    this.renderChart(); // 渲染图表
  },
  methods: {
    renderChart() {
      const myChart15 = echarts.init(document.getElementById("chart15")); // 初始化echarts图表
      myChart15.setOption(this.option15); // 设置图表的配置项
      const myChart14 = echarts.init(document.getElementById("chart14")); // 初始化echarts图表
      myChart14.setOption(this.option14); // 设置图表的配置项
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
}

.flex-container-fi {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0 0 0.5rem 1rem;
}
.flex-container-fi2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.fi-box {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.fi-box1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.fi-box2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 1.2rem;
}
.fi-box-2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
.fi-item1 {
  width: 2rem;
  height: 2rem;
  background-image: url("../assets/烟感.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.fi-item1-2 {
  width: 2rem;
  height: 2rem;
  background-image: url("../assets/烟感2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.fi-item1-3 {
  width: 2rem;
  height: 2rem;
  background-image: url("../assets/烟感3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.fi-item1-4 {
  width: 2rem;
  height: 2rem;
  background-image: url("../assets/烟感4.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.fi-box2item-1 {
  width: 3rem;
  height: 3rem;
  background-image: url("../assets/黄灯泡.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.fi-box2item-2 {
  font-size: 3.5rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}
.fi-item2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fi-item2-1 {
  font-size: 2.01rem;

  font-weight: 600;
  color: #f2f1f1;
}
.fi-item2-2 {
  font-size: 1.15rem;

  font-weight: 400;
  color: #88a0bf;
}
.cht14 {
  width: 25rem;
  height: 10rem;
}
.chart14 {
  width: 25rem;
  height: 10rem;
}
.cht15 {
  width: 25rem;
  height: 10rem;
}
.chart15 {
  width: 25rem;
  height: 10rem;
}
</style>